<template>
  <a-alert type="success" v-if="data.id">
    <template #message>

   
      

      <ClassifyIcon :classify="data.classify"></ClassifyIcon>
      <b>{{ data.nameCn }}</b>
      <br/>
      <a-tag color="#f50" v-if="'Y'==data.topic" style="cursor:pointer;" @click="changeTopic(data.id,'N')">Topic : Yes</a-tag>
      <a-tag color="#ddd" v-if="'Y'!=data.topic" style="cursor:pointer;" @click="changeTopic(data.id,'Y')">Topic : No</a-tag>
      
      
    </template>
    <template #description>
      <!-- <ClassifyView
        v-if="data.classify"
        :classify="data.classify"
        ></ClassifyView> -->

      ID：{{ data.id }}
      <span
        title="copy id"
        @click="copyToClipboard(data.id)"
        style="color: green; font-size: 12px; cursor: pointer"
        ><CopyOutlined /></span
      ><br /><br />
      Name Cn：{{ data.nameCn }}
      <span
        title="copy name"
        @click="copyToClipboard(data.nameCn)"
        style="color: green; font-size: 12px; cursor: pointer"
        ><CopyOutlined /></span
      >
      <br /><br />
      关键词 Keywords:<br />
      <!-- {{data.usage}} -->

      <a-textarea v-model:value="data.keyword" auto-size />
      <br /><br />
      <!-- Name En:<br />{{ data.nameEn }}<br /><br /> 
        Classify:<br />{{ data.classify }}<br /><br /> -->
      定义 Define:<br />
      <!-- {{data.define}} -->

      <a-textarea v-model:value="data.define" auto-size />
      
      <br /><br />
      作用 Usage:<br />
      <!-- {{data.usage}} -->

      <a-textarea v-model:value="data.usage" auto-size />

      <br /><br />
      描述 Description:<br />
      <!-- {{ data.desc }} -->
      <a-textarea v-model:value="data.desc" auto-size />
      <br /><br />
      <div style="text-align: right;" >
        <a-button size="small" type="primary" title="保存" @click="updatePmpItemDefineInfo" >
          <template #icon>
            <SaveOutlined />
          </template>
        </a-button>
      </div>

    </template>
  </a-alert>
</template>

<script setup>

import { CopyOutlined ,SaveOutlined} from "@ant-design/icons-vue";
import { messageApi } from "@/utils/MessageUtils";
import ClassifyIcon from "@/components/ClassifyIcon.vue";
import { ref, onMounted, watch ,toRaw} from "vue";
import pmpHooks from "@/hooks/PmpHooks.js";
import CONSTANTS from "@/constants/Constants.js";

// pmpItem对象
const data = ref({});

const props = defineProps({
  // pmpItem的id
  id: {
    type: String,
    default: () => "",
  },
});

onMounted(async () => {
  loadPageData();
  //   data.value = pmpHooks.loadPmpDictDetail(props.id)
  //   title.value = pmpHooks.loadPmpDictDetail(props.id).nameCn
});

watch(
  () => props.id,
  async (v) => {
    loadPageData();
    // data.value = pmpHooks.loadPmpDictDetail(v)
    // title.value = pmpHooks.loadPmpDictDetail(v).nameCn
  }
);

function copyToClipboard(text) {
  navigator.clipboard
    .writeText(text)
    .then(function () {
      console.log("Text copied to clipboard");
      messageApi.info("Text copied to clipboard");
    })
    .catch(function (err) {
      console.error("Failed to copy text: ", err);
    });
}

async function loadPageData() {
  if (CONSTANTS.relaClassify.SUB == props.relaClassify) {
    title.value = "相关词";
  }
  if (CONSTANTS.relaClassify.INPUT == props.relaClassify) {
    title.value = "输入";
  }
  if (CONSTANTS.relaClassify.OUTPUT == props.relaClassify) {
    title.value = "输出";
  }
  if (CONSTANTS.relaClassify.TOOL == props.relaClassify) {
    title.value = "技术及工具";
  }

  const res = await pmpHooks.queryPmpItemById(props.id);
  // alert(JSON.stringify(res))
  data.value = res.result;
}

async function updatePmpItemDefineInfo() {
  const postData = toRaw(data.value)
  // console.log(postData)

  const res = await pmpHooks.updatePmpItemDefineInfo(postData);
  if (res.code == "200") {
    messageApi.success("Update pmp item success");
  } else {
    messageApi.error("Update pmp item  failed");
  }
}

async function changeTopic(id,isTopic){
  const res = await pmpHooks.changeTopic(props.id,isTopic);
  if(res.code=='200'){
    messageApi.success('Change topic success')
    await loadPageData();
  }else{
    messageApi.error('Change topic failed')
  }
}
</script>

<style>
</style>